<template>
    <div id="main_wrap">
        <div class="nav">
            <ul>
                <li><router-link to="/discovery">发现音乐</router-link></li>
                <li><router-link to="/recommend">推荐歌单</router-link></li>
                <li><router-link to="/newMusic">最新音乐</router-link></li>
                <li><router-link to="/newMv">最新MV</router-link></li>
            </ul>
        </div>
        <div class="main">
            <!-- <discovery></discovery>-->
            <!-- 路由的出口 地址命中之后，把组件显示的位置-->
            <router-view :key="this.$route.path"></router-view>
        </div>
        <div class="player">
            <audio :src="musicUrl" controls="controls" autoplay></audio>
        </div>
    </div>
</template>

<script>
    import discovery from './discovery.vue'
    export default {
        name: "main_wrap",
        data(){
          return{
              musicUrl:"",
            }
        },
        components:{
           discovery,//discovery:discovery
        }
    }
</script>

<style scoped>
 #main_wrap{
     position: relative;
     display: flex;
     width: 100%;
     /*设置宽度为当前设备的视窗*/
     height: calc(100vh);
     padding-top: 60px;
     padding-bottom: 60px;
 }
 .nav{
     width: 200px;
     height: 100%;
     background-color:#ededed;
 }
 ul>li{
     text-align: center;
     margin:30px auto;
     font-size: 20px;
 }
  .main{
      flex:1;
      overflow-y: scroll;
  }
   a.router-link-exact-active{
       color:white;
       background-color: orange;
   }
   a{
       color:black;
       text-decoration: none;
   }
    .player{
        position: fixed;
        bottom: 0;
        left: 0;
        height:60px;
        width: 100%;
        background-color:rgb(241,243,244);
    }
    .player>audio{
        display: block;
        outline: none;
        width: 100%;
    }

</style>